在第11天，我會把所有示範專案部署到 Github Pages，因為 Github Pages 是免費且我手動部署也很簡單。

使用 Github Actions 部署到 Github Pages

Vue 3 應用程式

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  base,
  plugins: [
    base: '/fundamental-vue3/',
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

建置應用程式

在 vite.config.ts 中新增一個 base 屬性到 defineConfig 的物件中。
在本地環境中，網址是 http://localhost:4173/fundamental-vue3/，發布後則是 https://railsstudent.github.io/fundamental-vue3/。

打開終端機，執行

npm run build
將應用程式建置到 dist/ 目錄。然後執行

bash
npm run preview

可於 http://localhost:4173/fundamental-vue3/ 預覽和測試。

使用 Github Actions 部署到 Github Pages

建立 .github/workflows/main.yml 檔案，執行必要命令來建置並部署到 Github Pages：

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main # 或你的預設分支
  workflow_dispatch: # 允許手動觸發

permissions:
  id-token: write
  contents: read # 可能還需其他權限
  pages: write # 部署到 Github Pages

jobs:
  build-and-deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js (若需靜態網站生成器)
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site (例如靜態網站生成器)
        run: npm run build # 或你的建置指令

      - name: Add .nojekyll file
        run: touch dist/.nojekyll

      - name: Add 404.html file
        run: cp dist/index.html dist/404.html

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist # 或你的建置目錄

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

提交 yaml 檔至 main 分支即可自動部署。

前往 https://github.com/<repo user>/<repo name>/settings/environment，確認有建立名為 github-pages 的環境。點擊該環境，確認部署的 Deployment branches and tags 設定，確保只有 main 分支可進行部署。

接著前往 https://github.com/<repo user>/<repo name>/settings/pages，選擇使用 Github Action 作為 Build and deployment 來源。

點選 Live Site 以確保網站運作正常。

SvelteKit 應用程式

安裝 dependencies：

npm i --save-exact --save-dev @sveltejs/adapter-static

修改 svelte.config.ts：

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
         adapter: adapter({
            fallback: '404.html'
         }),
         paths: {
            base: '/fundamental_svelte'
         }
    }
};

export default config;

更新 adapter 並新增 paths 至 kit 屬性：

kit: {
    adapter: adapter({
        fallback: '404.html'
    }),
    paths: {
        base: '/fundamental_svelte'
    })
}

使用 Github Actions 部署到 Github Pages

建立 .github/workflows/main.yml：

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main
  workflow_dispatch:

permissions:
  id-token: write
  contents: read
  pages: write

jobs:
  build-and-deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build site
        run: npm run build

      - name: Add .nojekyll file
        run: touch build/.nojekyll

      - name: Configure GitHub Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./build

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Svelte 的 main.yml 與 Vue 類似，只是它會自動建立 404.html，且將 JS 編譯放到 build 資料夾。

將 yaml 檔案提交（commit）到 main 分支，以自動化部署流程。

確認 repository 中的設定與上述相同，線上網站應該能成功運行。

Angular 19 應用程式

Angular 提供了快速部署到 Github Pages 的方式：

執行指令：

ng add angular-cli-ghpages

此套件會安裝新的開發依賴。

在 angular.json 加入部署設定：

"deploy": {
   "builder": "angular-cli-ghpages:deploy"
}

"options": {
    "outputPath": {
      "base": "dist/fundamental-angular",
      "browser": ""
    }
}

"production": {
  "budgets": [
    ...
  ],
  "outputHashing": "all",
  "baseHref": "https://railsstudent.github.io/fundamental-angular/"
}

打開終端執行：

ng deploy

會自動部署應用到 Github Pages。

去 https://github.com/<your_repo>/settings/pages 點擊 live site，以確保網頁正常顯示。

我們已成功將購物車應用部署到 Github Pages。

資源

• Vue 3 部署教學：https://dev.to/ishmam_abir/publish-a-vuejs-3vite-project-on-github-pages-2a0b
• Svelte 部署：https://svelte.dev/docs/kit/adapter-static#GitHub-Pages
• Angular 部署：https://angular.dev/tools/cli/deployment

Github Repositories

• Vue 3: https://github.com/railsstudent/fundamental-vue3
• Angular: https://github.com/railsstudent/fundamental-angular
• Svelte: https://github.com/railsstudent/fundamental-svelte

Github Pages

• Vue 3：https://railsstudent.github.io/fundamental-vue3
• Angular：https://railsstudent.github.io/fundamental-angular
• Svelte：https://railsstudent.github.io/fundamental-svelte

我們已成功將購物車元件更新成能夠程式化地將值傳遞給 CSS 類別或內聯樣式。